require(['./config'], () => {
    require(['template', 'url', 'header', 'footer', 'fly', 'zoom'], (template, url, header) => {
        class Detail {
            constructor() {
                this.getData().then(() => {
                    this.renderDetail()
                    this.addToCart()
                    this.zoom()
                })
            }
            getData() {
                //取到id根据id渲染数据
                const id = Number(window.location.search.slice(4))
                return new Promise(resolve => {
                    $.get(url.base + '/detail', {
                        id
                    }, resp => {
                        if (resp.code == 200) {
                            //console.log(resp)
                            const {
                                detail
                            } = resp.body
                            //由于现在使用的是rap2假接口，detail里没有正确的id值，需要我们手动加上去
                            this.detail = {
                                ...detail,
                                id
                            }
                            resolve()
                        }
                    })
                })

            }
            renderDetail() {
                //console.log(this.detail)
                $('.main').html(template('detailTemplate', {
                    ...this.detail
                }))
            }
            addToCart() {
                const _this = this
                $('.car').on('click', (e) => {
                    this.fly(e)
                    //把当前数据存入localStorage，但在真实项目中还要提交后台
                    //先取出商品判断是否为空
                    let cart = localStorage.getItem('cart')
                    if (cart) {
                        //商品有数据
                        cart = JSON.parse(cart)
                        //判断当前这条数据是否和购物车里的数据是同一件商品
                        //如果是，就count++
                        //如果不是，再push
                        console.log(cart)
                        const isExsit = cart.some(shop => {
                            return shop.id === this.detail.id
                        })

                        if (isExsit) {
                            cart = cart.map(shop => {
                                if (shop.id === this.detail.id) shop.count++
                                return shop
                            })
                        } else {
                            cart.push({
                                ...this.detail,
                                count: 1,
                                check: true
                            })
                        }
                        localStorage.setItem('cart', JSON.stringify(cart))
                        //判断仓库是否有当前数据
                    } else {
                        //商品为空，
                        localStorage.setItem('cart', JSON.stringify([{
                            ...this.detail,
                            count: 1,
                            check: true
                        }]))
                    }

                })
            }
            fly(e) {
                // 抛物线效果
                $(`<img src="${this.detail.imgs[0]}" style="width: 20px;height:20px;border-radius:50%">`).fly({
                    start: {
                        left: e.clientX, //开始位置（必填）#fly元素会被设置成position: fixed
                        top: e.clientY, //开始位置（必填）
                    },
                    end: {
                        left: $('.cart').position().left, //结束位置（必填）
                        top: $('.cart').position().top //结束位置（必填）

                    },
                    speed: 1.1, //越大越快，默认1.2
                    vertex_Rtop: 30, //运动轨迹最高点top值，默认20
                    onEnd: function () {
                        this.destroy()
                        // 飞入效果结束以后更新购物车总数量
                        header.calcCartCount()
                    } //结束回调
                })
            }
            zoom() {
                $('.zoom-image').elevateZoom()
            }
        }
        new Detail()
    })

})